<template>
  <div class="voice">
    <van-nav-bar
      title="语音管理"
      left-text="返回"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="plus" size="18" />
      </template>
    </van-nav-bar>
    <!-- 列表 -->
    <div class="voiceItem">
      <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
  <template #pulling="props">
    <img
      class="doge"
      src="https://img.yzcdn.cn/vant/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <!-- 释放提示 -->
  <template #loosing>
    <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
  </template>

  <!-- 加载提示 -->
  <template #loading>
    <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
  </template>
  <van-cell center v-for="(item,index) in voiceList" :key="index" :title="switchTimeFormat(item.time)" :value="item.count+'/分'" :label="'备注:'+(item.remark?item.remark:'暂无')" />
</van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive ,toRefs,onMounted} from "vue";
import { get, post } from "@/api/http";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const router = useRouter();
    const onClickLeft = () => router.push("/home");
    const onClickRight = () => router.push("/addVoice");

    const state = reactive({
      isLoading: false,
      voiceList:''
    });
    const getVoiceList = async()=>{
        const res:any = await get("/getVoice")
        if(res.status === 200){
          state.voiceList =res.data;
        }else{
          alert("查询失败")
        }
        
    }
    const addZero = (v:number)=>{
        return v < 10 ? '0' + v : v
    }
    const  switchTimeFormat  = (time:string)=>{
      const dateTime = new Date(time)
      const year = dateTime.getFullYear()
      const month = dateTime.getMonth() + 1
      const date = dateTime.getDate()
      const hour = dateTime.getHours()
      const minute = dateTime.getMinutes()
      const second = dateTime.getSeconds()
      return `${year}-${addZero(month)}-${addZero(date)}`
    }
    onMounted(() => {
        getVoiceList();
    });
    const onRefresh = () => {
      setTimeout(() => {
        getVoiceList();
        Toast("刷新成功");
        state.isLoading = false;
      }, 1000);
    };

    return {
      onClickLeft,
      onClickRight,
      ...toRefs(state),
      onRefresh,
      switchTimeFormat
    };
  },
});
</script>
<style lang="less" scoped>
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
.voiceItem {
  padding-top: 46px;
  padding-bottom: 50px;
}
.voice{
  height: 100%;
}
</style>
